در این مطلب میخوام سایتی رو بهتون معرفی کنم که از نظر طراحی و گریدبندی بسیار زیبا و خلاقانه هست و میتونین با اسکرول صفحه به سمت پایین انیمیشنهای مختلف رو ببینید و لذت ببرید. از گریدبندی و نحوه نمایش المنتهای اون میتونین ایده بگیرید و در سایت و طراحیای خودتون اعمال کنید.
برای شروع وارد سایت details بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 307 تاريخ : دوشنبه 31 خرداد 1395 ساعت: 20:08
@import url(http://fonts.googleapis.com/css?family=Martel+Sans:200,300,400,800,900);
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #000;
}
section {
height: 350px;
width: 94%;
box-shadow: 0px 0px 146px 21px rgba(0, 0, 0, 0.75);
background-color: #000;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto 0px;
}
section a {
text-transform: uppercase;
text-align: center;
text-decoration: none;
font-size: 4.875em;
font-weight: 900;
color: #fff;
}
section a:after, section a:before {
content: '';
}
section.head {
background-color: #fff;
position: relative;
z-index: 10;
}
section.head a {
width: 652px;
height: 78px;
line-height: 78px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -326px;
margin-top: -39px;
font-weight: 200;
color: #BABABA;
-webkit-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);
-moz-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);
transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);
}
section.head a:before, section.head a:after {
color: #000;
font-weight: 900;
font-size: 30px;
text-transform: none;
display: block;
-webkit-transition: inherit;
-moz-transition: inherit;
transition: inherit;
}
section.head a:before {
content: attr(data-bf);
position: absolute;
top: -45px;
left: -5px;
}
section.head a:after {
content: attr(data-af);
position: absolute;
right: 0;
bottom: -30px;
}
section.head a:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
section.head a:hover:before {
-webkit-transform: scale(1.2) translate(-25px, -15px);
-moz-transform: scale(1.2) translate(-25px, -15px);
-ms-transform: scale(1.2) translate(-25px, -15px);
-o-transform: scale(1.2) translate(-25px, -15px);
transform: scale(1.2) translate(-25px, -15px);
}
section.head a:hover:after {
-webkit-transform: scale(1.2) translate(25px, 15px);
-moz-transform: scale(1.2) translate(25px, 15px);
-ms-transform: scale(1.2) translate(25px, 15px);
-o-transform: scale(1.2) translate(25px, 15px);
transform: scale(1.2) translate(25px, 15px);
}
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 262 تاريخ : دوشنبه 31 خرداد 1395 ساعت: 20:08
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون فرآیندی که خودشون بر روی آیکونهای SVG اعمال میکنن رو توضیح داده و میتونین از اون استفاده کنید و تجربتون بیشتر بشه. در این آموزش بصورت مرحله به مرحله، فرآیند آماده سازی آیکونها برای استفاده در سایت قرار داده شده و خیلی میتونه کمکتون کنه.
برای شروع وارد سایت our-svg-icon-process بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 294 تاريخ : دوشنبه 31 خرداد 1395 ساعت: 20:08
در جلسه سی و یکم دوره آموزش فریم ورک فاندیشن می پرداریم به پیاده سازی بخش پایانی پروژه نهایی این دوره و آنچه را که آموختیم رو در قالب یک پروژه کاملا کاربردی پیاده سازی خواهیم کرد
با تشکر...
در این جلسه می پردازیم به :
استفاده از پلاگین joyride برای ایجاد تور قالب
کدنویسی پلاگین کاربردی اسکرول به بالای صفحه توسط جاوااسکریپت و انیمیشن های css
جمع بندی و توصیه ها
توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 293 تاريخ : جمعه 28 خرداد 1395 ساعت: 21:35
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
};
var title = {
text: 'Browser market shares at a specific website, 2014'
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
};
var series = [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8], {
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 307 تاريخ : جمعه 28 خرداد 1395 ساعت: 8:19
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک رابط کاربری برای پیش نمایش سایت در موبایل با استفاده ازCSS و Javascript ساخته میشه و میتونین از اون استفاده کنید. فرض کنید که شما یک سایت دارید که میخاید اون رو در ظاهر گوشی های مورد نظرتون در سایت دیگه ای قرار بدین. برای اینکار از iframe استفاده میکنیم. حالا میتونیم این iframe رو در این رابط کاربری قرار بدین و پیش نمایش موبایل رو به کاربران نمایش بدین. چند دستگاه مختلف وحود داره که میتونین از هر کدوم خواستید استفاده کنید. کدهای مربوط به این ابزار در پایین صفحه مورد نظر قرار داده شده و میتونین از اون استفاده کنید.
برای شروع وارد سایت preview-tool بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 322 تاريخ : جمعه 28 خرداد 1395 ساعت: 8:19
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
section {
font-family: 'Open Sans', sans-serif;
height: 350px;
position: relative;
background-clip: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
overflow: hidden;
width: 94%;
margin: 0 auto 30px;
}
section a {
text-transform: uppercase;
font-weight: 800;
text-align: center;
text-decoration: none;
color: #fff;
display: block;
font-size: 4.875em;
}
section.p2 {
background-image: url(3.jpg);
}
section.p2 a {
width: 216px;
height: 94px;
line-height: 94px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -108px;
margin-top: -47px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
color: transparent;
}
section.p2 a:after,
section.p2 a:before {
-webkit-transition: inherit;
-moz-transition: inherit;
-ms-transition: inherit;
-o-transition: inherit;
transition: inherit;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
content: attr(data-cont);
color: #fff;
}
section.p2 a:before {
-webkit-clip-path: polygon(0 0, 0 100%, 12.5% 100%, 12.5% 0, 25% 0, 25% 100%, 37.5% 100%, 37.5% 0, 50% 0, 50% 100%, 62.5% 100%, 62.5% 0, 75% 0, 75% 100%, 87.5% 100%, 87.5% 0);
clip-path: polygon(0 0, 0 100%, 12.5% 100%, 12.5% 0, 25% 0, 25% 100%, 37.5% 100%, 37.5% 0, 50% 0, 50% 100%, 62.5% 100%, 62.5% 0, 75% 0, 75% 100%, 87.5% 100%, 87.5% 0);
}
section.p2 a:after {
-webkit-clip-path: polygon(12.5% 0, 12.5% 100%, 25% 100%, 25% 0, 37.5% 0, 37.5% 100%, 50% 100%, 50% 0, 62.5% 0, 62.5% 100%, 75% 100%, 75% 0, 87.5% 0, 87.5% 100%, 100% 100%, 100% 0);
clip-path: polygon(12.5% 0, 12.5% 100%, 25% 100%, 25% 0, 37.5% 0, 37.5% 100%, 50% 100%, 50% 0, 62.5% 0, 62.5% 100%, 75% 100%, 75% 0, 87.5% 0, 87.5% 100%, 100% 100%, 100% 0);
}
section.p2 a:hover {
color: #fff;
}
section.p2 a:hover:before {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform: translate(0, -100%);
color: transparent;
}
section.p2 a:hover:after {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
color: transparent;
}
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 283 تاريخ : جمعه 28 خرداد 1395 ساعت: 8:19
مدرسه استانداردهای وب برگزار میکند
به گزارش روابط عمومی مدرسه استانداردهای وب، کارگاههای جانبی این همایش جهت آموزش کامل برخی از موضوعات در تاریخ 30 و 31 تیر 95 برگزار می شود و تمامی شرکتکنندگان حضوری، میتوانند در کارگاه مورد نظر خود شرکت کنند.
همچنین بخش سخنرانیهای این رویداد نیز به صورت آنلاین پوشش داده خواهد شد تا افرادی که امکان حضور در همایش را ندارند، بتوانند از سخنرانیها استفاده کنند.
آشنایی با تکنیکها، کتابخانهها و فریم ورکهای جدید، شرکت در کارگاههای آموزشی وبرقراری ارتباط و شبکهسازی با سایر متخصصین این حوزه از اهداف این همایش ذکر شده است .
گفتنی است مدرسه استانداردهای وب، با هدف استاندارد سازی این بستر، فعالیت خود را از سال 1392 آغاز کرد و در این مدت با برگزاری همایش ها، کارگاه ها و گردهمایی های متعدد تلاش دارد تا به اهداف تعیین شده خود برسد؛ این مدرسه با برگزاری کارگاه ها و همایش های تخصصی و فنی به آموزش دست اندرکاران حوزه فناوری اطلاعات و ارتباطات کمک خواهد کرد. این مجموعه قصد دارد تا تمامی اقشار جامعه بتوانند از این رویداد 2روزه بهره مند شوند به همین منظور در جهت حمایت از دانشجویان، دانش آموزان و همچنین مددجویان بهزیستی، تخفیفات ویژه ای برای این عزیزان در نظر گرفته شده که با مراجعه به وب سایت همایش اطلاعات تکمیلی در این زمینه دریافت می شود.
:: وبسایت سون لرن به عنوان حامی رسانه ای، شما را به ثبت نام سریعتر در این همایش دعوت می نماید .
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 306 تاريخ : پنجشنبه 27 خرداد 1395 ساعت: 13:35
توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 351 تاريخ : چهارشنبه 26 خرداد 1395 ساعت: 19:41
@import url(http://fonts.googleapis.com/css?family=Francois+One);
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
@font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
}
body {
font-size: 62.5%;
background-color: #fff;
margin: 10px;
border: 1px solid #333;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
text-transform: uppercase;
}
h1 {
font-size: 2.4em;
background-color: #292929;
text-align: center;
padding: 20px;
margin: 0;
color: #fff;
}
h1 a {
display: block;
margin-top: 10px;
text-transform: none;
color: #aaa;
font-size: 16px;
text-decoration: none;
}
.headingOuter {
background: #f1f1f1;
text-align: center;
margin-top: 50px;
margin-bottom: 0;
padding: 10px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font-size: 1.6em;
}
.headingOuter:first-child {
margin-top: 0;
}
h1 + .headingOuter {
margin-top: 0;
}
/* =====================================================
Some defaults across all toggle demos
===================================================== */
.toggle {
display: block;
text-align: center;
margin-top: 40px;
user-select: none;
}
.toggle--checkbox {
display: none;
}
.toggle--btn {
display: block;
margin: 0 auto;
font-size: 1.4em;
transition: all 350ms ease-in;
}
.toggle--btn:hover {
cursor: pointer;
}
.toggle--btn, .toggle--btn:before, .toggle--btn:after,
.toggle--checkbox,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature,
.toggle--feature:before,
.toggle--feature:after {
transition: all 250ms ease-in;
}
.toggle--btn:before, .toggle--btn:after,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature:before,
.toggle--feature:after {
content: '';
display: block;
}
/* =====================================================
Toggle - switch stylee
===================================================== */
.toggle--switch .toggle--btn {
position: relative;
width: 120px;
height: 44px;
font-family: 'PT Sans', Sans Serif;
text-transform: uppercase;
color: #fff;
background: linear-gradient(90deg, #a4bf4d 0%, #a4bf4d 50%, #ca5046 50%, #ca5046 200%);
background-position: -80px 0;
background-size: 200% 100%;
box-shadow: inset 0 0px 22px -8px #111;
}
.toggle--switch .toggle--btn, .toggle--switch .toggle--btn:before {
border-radius: 4px;
}
.toggle--switch .toggle--btn:before {
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 52px;
height: 44px;
border: 2px solid #202027;
background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
background-color: #2b2e3a;
background-size: 5px 5px;
text-indent: -100%;
}
.toggle--switch .toggle--feature {
position: relative;
display: block;
overflow: hidden;
height: 44px;
text-shadow: 0 1px 2px #666;
}
.toggle--switch .toggle--feature:before, .toggle--switch .toggle--feature:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.toggle--switch .toggle--feature:before {
content: attr(data-label-on);
left: -60%;
}
.toggle--switch .toggle--feature:after {
content: attr(data-label-off);
right: 16%;
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn {
background-position: 0 0;
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn:before {
left: calc(100% - 52px);
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {
left: 20%;
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {
right: -60%;
}
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 306 تاريخ : چهارشنبه 26 خرداد 1395 ساعت: 15:56
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<div id="sliders">
<table>
<tr>
<td>Alpha Angle</td>
<td>
<input id="R0" type="range" min="0" max="45" value="15" /> <span id="R0-value" class="value"></span></td>
</tr>
<tr>
<td>Beta Angle</td>
<td>
<input id="R1" type="range" min="0" max="45" value="15" /> <span id="R1-value" class="value"></span></td>
</tr>
</table>
</div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
renderTo: 'container',
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
};
var title = {
text: 'Chart rotation demo'
};
var subtitle = {
text: 'Test options by dragging the sliders below'
};
var plotOptions = {
column: {
depth: 25
}
};
var series = [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.series = series;
json.plotOptions = plotOptions;
var highchart = new Highcharts.Chart(json);
function showValues() {
$('#R0-value').html(highchart.options.chart.options3d.alpha);
$('#R1-value').html(highchart.options.chart.options3d.beta);
}
// Activate the sliders
$('#R0').on('change', function() {
highchart.options.chart.options3d.alpha = this.value;
showValues();
highchart.redraw(false);
});
$('#R1').on('change', function() {
highchart.options.chart.options3d.beta = this.value;
showValues();
highchart.redraw(false);
});
showValues();
});
</script>
</body>
</html>
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 350 تاريخ : چهارشنبه 26 خرداد 1395 ساعت: 15:56
توضیحات : وردپرس به عنوان محبوب ترین سیستم مدیریت محتوا در بین اکثر کاربران فضای مجازی به خوبی شناخته شده است و این موضوع باعث شده تا سیستم های مختلفی برای وردپرس تهیه و به بازار عرضه شود. هر چند وردپرس خود رایگان است اما قابلیت های توسعه آن از جمله قالب ها و پلاگین ها که به کاربران کمک می کند سیستم مورد نظر خود را پیاده سازی کنند، باعث شده است تا رونق بسیار زیادی در بازار فروش قالب ها و پلاگین های آن ایجاد شود. فروش هایی که تا دهها میلیون دلار هم برای یک افزونه می رسد! در این دوره سعی کرده ایم تمامی مواردی که شما برای تهیه یک پلاگین عالی و کاملا حرفه ای نیاز دارد را قرار دهیم و تدریس نماییم. آموزش ها به صورت کاملا پروژه محور و کاربردی تهیه شده است، پلاگین هایی حرفه ای که هم نحوه ایجاد و کدنویسی آنها را یاد خواهید گرفت و هم آنها را در پایان دوره خواهید داشت. شما پس از گذراندن این دوره قادر خواهید بود هر نوع پلاگین دلخواه دیگری را که فکر می کنید برای سایت خود بنویسید. لازم به ذکر است در صورت سفارش پلاگین های طراحی و کدنویسی شده در این دوره، باید هزینه ای حداقل 800 هزارتومانی بپردازید! در صورتی که در این دوره شما فقط با پرداخت هزینه ای اندک، هم پلاگین نویسی حرفه ای خواهید شد و هم این پلاگین ها را در پایان دوره خواهید داشت. تدریس مباحث این دوره نیز به مانند دوره های دیگر سون لرن، بر اساس اصل صداقت در تدریس و جامع بودن دوره هاست و مدرس تمامی تجربیات حرفه ای خود در این زمینه را به شما انتقال خواهد داد! به جرئت می توانیم ادعا کنیم دوره حاضر حرفه ای ترین و استانداردترین دوره پلاگین نویسی وردپرس است که در سطح ایران برگزار می گردد. پس فرصت را از دست ندهید و خود را به یک پلاگین نویس حرفه ای وردپرس تبدیل کنید!
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 298 تاريخ : چهارشنبه 26 خرداد 1395 ساعت: 15:56
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون لیستی از ویدئوهای مفید برای css قرار داده شده و میتونین اونا رو ببینید و با موارد مختلفی که در این زمینه وجود داره آشنا بشید.
برای شروع وارد سایت must-watch-css بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 309 تاريخ : سه شنبه 25 خرداد 1395 ساعت: 2:45
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
min-height: 100%;
height: 100%;
background-image: url(http://theartmad.com/wp-content/uploads/Dark-Grey-Texture-Wallpaper-5.jpg);
background-size: cover;
background-position: top center;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-weight: 200;
}
html.modal-active, body.modal-active {
overflow: hidden;
}
.button {
display: inline-block;
text-align: center;
padding: 10px 15px;
margin: 10px;
background: red;
font-size: 18px;
background-color: #efefef;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:hover {
color: white;
background: #009bd5;
}
#modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
#modal-container .modal-background {
display: table-cell;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
#modal-container .modal-background .modal {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
#modal-container .modal-background .modal h2 {
font-size: 25px;
line-height: 25px;
margin-bottom: 15px;
}
#modal-container .modal-background .modal p {
font-size: 18px;
line-height: 22px;
}
#modal-container .modal-background .modal .modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
}
#modal-container .modal-background .modal .modal-svg rect {
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 778;
stroke-dashoffset: 778;
}
#modal-container.five {
transform: scale(1);
}
#modal-container.five .modal-background {
background: transparent;
animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five .modal-background .modal {
transform: translateX(-1500px);
animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five.out {
animation: quickScaleDown 0s .5s linear forwards;
}
#modal-container.five.out .modal-background {
animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five.out .modal-background .modal {
animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
@keyframes roadRunnerIn {
0% {
transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
}
70% {
transform: translateX(30px) skewX(0deg) scaleX(0.9);
}
100% {
transform: translateX(0px) skewX(0deg) scaleX(1);
}
}
@keyframes roadRunnerOut {
0% {
transform: translateX(0px) skewX(0deg) scaleX(1);
}
30% {
transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
}
100% {
transform: translateX(1500px) skewX(30deg) scaleX(1.3);
}
}
@keyframes fadeIn {
0% {
background: transparent;
}
100% {
background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeOut {
0% {
background: rgba(0, 0, 0, 0.7);
}
100% {
background: transparent;
}
}
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 309 تاريخ : سه شنبه 25 خرداد 1395 ساعت: 2:45
توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 326 تاريخ : دوشنبه 24 خرداد 1395 ساعت: 17:16
@import url(http://fonts.googleapis.com/css?family=Francois+One);
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
@font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
}
body {
font-size: 62.5%;
background-color: #fff;
margin: 10px;
border: 1px solid #333;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
text-transform: uppercase;
}
h1 {
font-size: 2.4em;
background-color: #292929;
text-align: center;
padding: 20px;
margin: 0;
color: #fff;
}
h1 a {
display: block;
margin-top: 10px;
text-transform: none;
color: #aaa;
font-size: 16px;
text-decoration: none;
}
.headingOuter {
background: #f1f1f1;
text-align: center;
margin-top: 50px;
margin-bottom: 0;
padding: 10px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font-size: 1.6em;
}
.headingOuter:first-child {
margin-top: 0;
}
h1 + .headingOuter {
margin-top: 0;
}
/* =====================================================
Some defaults across all toggle demos
===================================================== */
.toggle {
display: block;
text-align: center;
margin-top: 40px;
user-select: none;
}
.toggle--checkbox {
display: none;
}
.toggle--btn {
display: block;
margin: 0 auto;
font-size: 1.4em;
transition: all 350ms ease-in;
}
.toggle--btn:hover {
cursor: pointer;
}
.toggle--btn, .toggle--btn:before, .toggle--btn:after,
.toggle--checkbox,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature,
.toggle--feature:before,
.toggle--feature:after {
transition: all 250ms ease-in;
}
.toggle--btn:before, .toggle--btn:after,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature:before,
.toggle--feature:after {
content: '';
display: block;
}
/* =====================================================
Toggle - knob button style
===================================================== */
.toggle--knob .toggle--btn {
position: relative;
width: 120px;
height: 40px;
font-family: 'PT Sans', Sans Serif;
text-transform: uppercase;
color: #fff;
background: #a4bf4d;
box-shadow: inset 0 20px 40px -10px #7b9d25;
border-radius: 40px;
}
.toggle--knob .toggle--btn:before {
display: block;
position: absolute;
top: 50%;
left: 60%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: #f1f1f1;
box-shadow: 0 4px 10px 0 #999, inset 0 10px 10px 8px rgba(241, 241, 241, 0.6), inset 0 0 8px 0px #333, inset 0 0 0 13px #ccc, inset 0 0 0 14px #f1f1f1;
text-indent: -100%;
}
.toggle--knob .toggle--feature {
position: relative;
display: block;
overflow: hidden;
height: 40px;
text-shadow: 0 1px 2px #666;
}
.toggle--knob .toggle--feature:before, .toggle--knob .toggle--feature:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.toggle--knob .toggle--feature:before {
content: attr(data-label-on);
left: 20%;
}
.toggle--knob .toggle--feature:after {
content: attr(data-label-off);
right: -60%;
}
.toggle--knob .toggle--checkbox:checked + .toggle--btn {
background: #a2a2a2;
box-shadow: inset 0 20px 40px -10px #7e7e7e;
}
.toggle--knob .toggle--checkbox:checked + .toggle--btn:before {
left: 0;
}
.toggle--knob .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {
left: -60%;
}
.toggle--knob .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {
right: 20%;
}
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 280 تاريخ : دوشنبه 24 خرداد 1395 ساعت: 3:01
در این مطلب میخوام سایتی رو بهتون معرفی کنم که از نظر طراحی بسیار زیبا هست و میتونین از اون ایده های زیادی بگیرید. وقتی که ماوس جابجا میشه حالت زیبایی رو به وجود میاره و همچنین با جابجا شدن بین صفحه ها انیمیشنهای دیدنی نمایش داده میشه. هر کدوم از قسمتهای این سایت نکات زیادی داره و میتونین تک تک اونا رو ببینید و لذت ببرید.
برای شروع وارد سایت activetheory بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 297 تاريخ : دوشنبه 24 خرداد 1395 ساعت: 3:01
<html>
<head>
<title>Highcharts Tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var title = {
text: 'Combination chart'
};
var xAxis = {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
};
var labels = {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
};
var series = [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}];
var json = {};
json.title = title;
json.xAxis = xAxis;
json.labels = labels;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 328 تاريخ : يکشنبه 23 خرداد 1395 ساعت: 23:09
توضیحات : وردپرس به عنوان محبوب ترین سیستم مدیریت محتوا در بین اکثر کاربران فضای مجازی به خوبی شناخته شده است و این موضوع باعث شده تا سیستم های مختلفی برای وردپرس تهیه و به بازار عرضه شود. هر چند وردپرس خود رایگان است اما قابلیت های توسعه آن از جمله قالب ها و پلاگین ها که به کاربران کمک می کند سیستم مورد نظر خود را پیاده سازی کنند، باعث شده است تا رونق بسیار زیادی در بازار فروش قالب ها و پلاگین های آن ایجاد شود. فروش هایی که تا دهها میلیون دلار هم برای یک افزونه می رسد! در این دوره سعی کرده ایم تمامی مواردی که شما برای تهیه یک پلاگین عالی و کاملا حرفه ای نیاز دارد را قرار دهیم و تدریس نماییم. آموزش ها به صورت کاملا پروژه محور و کاربردی تهیه شده است، پلاگین هایی حرفه ای که هم نحوه ایجاد و کدنویسی آنها را یاد خواهید گرفت و هم آنها را در پایان دوره خواهید داشت. شما پس از گذراندن این دوره قادر خواهید بود هر نوع پلاگین دلخواه دیگری را که فکر می کنید برای سایت خود بنویسید. لازم به ذکر است در صورت سفارش پلاگین های طراحی و کدنویسی شده در این دوره، باید هزینه ای حداقل 800 هزارتومانی بپردازید! در صورتی که در این دوره شما فقط با پرداخت هزینه ای اندک، هم پلاگین نویسی حرفه ای خواهید شد و هم این پلاگین ها را در پایان دوره خواهید داشت. تدریس مباحث این دوره نیز به مانند دوره های دیگر سون لرن، بر اساس اصل صداقت در تدریس و جامع بودن دوره هاست و مدرس تمامی تجربیات حرفه ای خود در این زمینه را به شما انتقال خواهد داد! به جرئت می توانیم ادعا کنیم دوره حاضر حرفه ای ترین و استانداردترین دوره پلاگین نویسی وردپرس است که در سطح ایران برگزار می گردد. پس فرصت را از دست ندهید و خود را به یک پلاگین نویس حرفه ای وردپرس تبدیل کنید!
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 369 تاريخ : يکشنبه 23 خرداد 1395 ساعت: 5:23
در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون میتونین با استفاده از محیط ساده ای که براتون قرار داده شده، آهنگهای مورد نظر خودتون رو بسازید. با کلیک بر روی هر کدوم یک صدا ایجاد میشه و اصلش اینه که با استفاده از کیبورد این صداها رو بوجود بیارید. با کلیک بر روی هر دکمه کیبورد، صدای متناظر با اون پخش میشه. حالا اگه بخواین یک سری صدا رو پشت سر هم قرار بدین تا یک آهنگ درست بشه، باید کلیک Shift رو فشار بدین تا وارد محیط ضبط بشید و بعد از اون هر دکمه ای که کلیک کنید رو ضبط میکنه و در پایان مجددا بر روی Shift کلیک کنید تا ضبط به پایان برسه. بعد از اون میتونین صداها رو جابجا و حذف و ... کنید. در نهایت هم میتونین برای آهنگی که ساختید اسم بزارید و اونو ذخیره کنید. یک نمونه آهنگ که با این ابزار ساخته شده رو در اینجا ببینید. برای پخش شدن آهنگ بر روی دکمه play که آیکون مثلثی شکل هست کلیک کنید.
برای شروع وارد سایت sampulator بشین.
امیدوارم بدردتون بخوره.
موفق باشید.
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 298 تاريخ : يکشنبه 23 خرداد 1395 ساعت: 5:23